<template>
    <view>
        <view class="" style="height: 100%;">
            <view class="flex margin">
                <view class="flex-sub text-xl">{{ categoryName }}</view>
                <view class="flex-sub text-right" @click="screen(typeIndex)">
                    {{ i18n.more }}
                    <text class="cuIcon-right" />
                </view>
            </view>
            <!-- 广告 -->
            <Adview :adSwitchKg="adSwitchKg" :homeADList="oneAd"></Adview>
            <view class="grid col-3 padding-lr-sm" v-if="list.length > 0">
                <view
                    class="vod-box"
                    style="width: 33.3%;margin: 10rpx 0;"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="detail(item.vod_id)"
                >
                    <u-image
                        v-if="item.vod_pic"
                        class="vod_pic"
                        :src="item.vod_pic.search('http') >= 0 ? item.vod_pic : imageBaseUrl + item.vod_pic"
                        :lazy-load="true"
                        mode="scaleToFill"
                        height="330"
                        border-radius="10"
                        :fade="true"
                        duration="450"
                    >
                        <u-loading slot="loading"></u-loading>
                        <view slot="error" style="font-size: 24rpx;">{{ i18n.loadingFail }}</view>
                    </u-image>
                    <view class="vod-remarks">
                        <text class="text-cut" v-if="!isShowxx">
                            {{ item.vod_remarks == '' ? i18n.ended : item.vod_remarks }}
                        </text>
                        <text class="text-cut-showxx" v-else></text>
                    </view>
                    <view class="vod_name shadow" style="margin-top: -20rpx;">{{ item.vod_name }}</view>
                </view>
            </view>
            <view v-if="(list.length <= 0 || loading) && !isShowBtn" class="grid col-3 padding-lr-sm loading">
                <u-loadmore status="loading" />
            </view>

            <view class="padding-xl" style="margin-top: -40rpx;" v-if="isShowBtn">
                <button
                    class="cu-btn block margin-tb-sm lg shadow tap-btn"
                    :style="{ backgroundColor: typelist[tabIndex].color }"
                    @tap.stop="click($event)"
                    :disabled="disabled"
                >
                    <text v-if="loading" class="cuIcon-loading2 cuIconfont-spin text-white"></text>
                    {{ i18n.changeBtn }}
                </button>
            </view>
        </view>
        <view class="padding-bottom"></view>
    </view>
</template>

<script>
import Adview from '@/components/home-ad/ad-view.vue';
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    name: 'vodList',
    components: {
        Adview
    },
    props: {
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        typeIndex: {
            type: [String, Number]
        },
        tabIndexs: {
            type: [String, Number],
            default: 0
        },
        categoryName: {
            type: [String, Object],
            default: ''
        },
        imageBaseUrl: {
            type: [String, Object],
            default: ''
        },
        loading: {
            type: Boolean,
            default: false
        },
        onClick: {
            type: Function,
            default: () => {}
        },
        isShowxx: {
            type: Number,
            default: 0
        },
        isShowBtn: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        i18n() {
            return globalData.$t('index');
        }
    },
    watch: {
        tabIndexs(newVal, oldVal) {
            this.tabIndex = newVal;
        }
    },
    data() {
        return {
            adSwitchKg: globalData.adSwitchKg || uni.getStorageSync('sys_config').ad_switch,
            oneAd: MyApp.getOneAd('common_ad'),
            tabIndex: 0,
            typelist: globalData.typelist,
            background: {
                backgroundImage: 'linear-gradient(to right, #5EFCE8,#736EFE)'
            },
            cardCur: 0,
            swiperList: [],
            dotStyle: false,
            towerStart: 0,
            direction: '',
            disabled: false
        };
    },
    methods: {
        // 按钮点击
        click(e) {
            // 进行节流控制，每this.throttle毫秒内，只在开始处执行
            this.$u.throttle(() => {
                this.$emit('click', e);
            }, 1000);
        },
        detail(vod_id) {
            MyApp.godetail(vod_id);
        },
        screen(type) {
            uni.navigateTo({
                url: '/packageA/pages/cate/lists?id=' + type
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.vod-box {
    width: 100%;
    background-color: #ffffff;
    float: left;
    box-sizing: border-box;
    font-size: 28rpx;
    padding: 0 9rpx;
    .vod_name {
        text-align: center;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.vod-remarks {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 95%;
    position: relative;
    bottom: 50rpx;
    padding-left: 8rpx;
    border-radius: 0 0 10rpx 10rpx;

    .text-cut {
        padding: 0 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background: linear-gradient(to right, #6078ea, #17ead9 100%);
        box-shadow: 0 2px 6px rgba(109, 155, 241, 0.2);
        left: 10rpx;
        color: #ffffff;
        font-size: 26rpx;
    }
    .text-cut-showxx {
        padding: 0 5px;
    }
}
.tap-btn {
    color: #ffffff;
}
.loading {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}
.vod_pic {
    box-shadow: 0.04rem 0.4rem 0.4rem rgba(99, 99, 99, 0.29);
    border-radius: 10rpx;
}
.ico-right {
    float: right;
}
.padding-bottom {
    padding-bottom: 100upx;
}
</style>
